<template>
  <div class="filter-bar">
    <div class="item" style="flex: 1"  @click="setOrder('overallScore')">
      <span>综合</span>
      <template v-if="sortProp==='overallScore'">
        <i class="el-icon-caret-top" v-if="sortOrder==='ASC'"></i>
        <i class="el-icon-caret-bottom" v-if="sortOrder==='DESC'" ></i>
      </template>
    </div>

    <div class="item" style="flex: 1"  @click="setOrder('saleNums')">
      <span>销量</span>
      <template v-if="sortProp==='saleNums'">
        <i class="el-icon-caret-top" v-if="sortOrder==='ASC'"></i>
        <i class="el-icon-caret-bottom" v-if="sortOrder==='DESC'"></i>
      </template>
    </div>

    <div class="item" style="flex: 1"  @click="setOrder('price')">
      <span>价格</span>
      <template v-if="sortProp==='price'">
        <i class="el-icon-caret-top" v-if="sortOrder==='ASC'"></i>
        <i class="el-icon-caret-bottom" v-if="sortOrder==='DESC'"></i>
      </template>
    </div>

    <div class="item" style="flex: 2.5">
      <span>分类</span>
      <button @click="chooseClassify()" v-text="classifyName?classifyName:'请选择'">请选择</button>
    </div>

  </div>
</template>

<script>
export default {
  name: 'ProductFilterBar',
  props:{
    classifyNameParams:String,
    callback:Function
  },
  data:function () {
    return {
      sortProp:'saleNums',
      sortOrder:'ASC',
      classifyName:'',
      productCateList:[],
    }
  },
  mounted () {
    if (this.$props.classifyNameParams){
      this.classifyName=this.$props.classifyNameParams
    }
  },
  methods:{
    chooseClassify:function () {
      let $this=this
      $this.bus.$emit('ChooseProductClassifyDialogCallBus',$this.classifyName,function (classifyName) {
        // console.log(classifyName)
        $this.classifyName=classifyName
        $this.setCallback()
        $this.$forceUpdate()
      })
    },
    setOrder:function (sortProp) {
      if (sortProp!==this.sortProp){
        this.sortOrder="DESC"
      }else{
        this.sortOrder=this.sortOrder==='DESC'?'ASC':'DESC'
      }
      this.sortProp=sortProp
      this.setCallback()
    },
    setCallback(){
     if (typeof this.callback==='function'){
       this.$props.callback({
         sortOrder:this.sortOrder,
         sortProp:this.sortProp,
         classifyName:this.classifyName,
       })
     }
    }
  }
}
</script>

<style scoped>

</style>
